<template>
	<div class="vue_app NewThematicActivities" style="height: 100%;" @click="openApp">
		<div class="sbbjclass">
			<m-header :title="Title" :hasTitle="true" :hasBack="true" :hasCart="true" v-show="isShare != 1">
				<Share :url="shareUrl()" style="right: 3rem;z-index: 100;"></Share>
			</m-header>
			<div style="z-index: 3">
				<!--position:absolute; width: 100% ; height: 0;top:60px;-->
				<animate-refresh @dataRefresh="dataRefresh" ref="animatexl">
				</animate-refresh>
			</div>
			<!---->
			<header-tab class="tabzindex1" 
				:class="{tabshow:!tabshow}" 
				:tabindex="tabindex" 
				:style="`background-color: ${tabbgcolor}`" 
				:titleInfor="HeaderTabNavArray" 
				@tabOnChange="tabOnChange" 
				:styleConfig="styleConfig" 
				v-for="(item, index) in pageTree.header[type.TabHead]" 
				:key="index+'acHead'" 
				v-sdrag:real="{id: item.id, com: item.id, dragable: 0, type: type.TabHead}"
			>
			</header-tab>
			<div class="contentnew" ref="scollAllClass" id="scollAllClass" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
				<div>
					<header-container style="position: relative;">
						<activitiesbanner 
                            :list="dataStore[item.type][item.id] || []" 
                            :bannerid="item.id" 
                            v-for="(item, index) in pageTree.header[type.activitiesbanner]" 
                            :key="index+'acbanner'" 
                            v-sdrag:real="{id: item.id, com: item.id, type: type.activitiesbanner}">
						</activitiesbanner>
						<header-tab 
						class="tabzindex1" 
						:tabindex="tabindex" 
						:class="{tabshow:tabshow}" 
						:style="`background-color: ${tabbgcolor}`" 
						:titleInfor="HeaderTabNavArray" 
						@tabOnChange="tabOnChange" 
						:styleConfig="styleConfig" 
						v-for="(item, index) in pageTree.header[type.TabHead]" 
						:key="index+'acHead'" 
						v-sdrag:real="{id: item.id, com: item.id, dragable: 0, type: type.TabHead}">
						</header-tab>
					</header-container>

					<content-container v-scter :style="`background-color: ${Bgcolor}`">
						<HomeCarousel :list="dataStore[item.type][item.id] || []" :bannerid="item.id" v-for="(item, index) in pageTree.content[type.HomeCarousel]" v-sdrag:real="{id: item.id, com: item.id, type: type.HomeCarousel}" :key="index + 'carousel'">
						</HomeCarousel>

						<activitiesbanner :list="dataStore[item.type][item.id] || []" :bannerid="item.id" v-for="(item, index) in pageTree.content[type.activitiesbanner]" :key="index+'acbanner2'" v-sdrag:real="{id: item.id, com: item.id, type: type.activitiesbanner}">
						</activitiesbanner>

						<new-zone :list="dataStore[item.type][item.id] || []" v-for="(item, index) in activitiesNineProFilter" :key="index+'acNineProFilter'" v-sdrag:real="{id: item.id, com: item.id, type: type.NewZone}">
						</new-zone>

						<activities-three-pic :list="dataStore[item.type][item.id] || []" v-for="(item, index) in pageTree.content[type.activitiesThreePic]" :key="index+'acThreePic'" v-sdrag:real="{id: item.id, com: item.id, type: type.activitiesThreePic}">
						</activities-three-pic>

						<activities-slide-pic :list="dataStore[item.type][item.id] || []" v-for="(item, index) in pageTree.content[type.activitiesSlidePic]" :key="index+'acSlidePic'" v-sdrag:real="{id: item.id, com: item.id, type: type.activitiesSlidePic}">
						</activities-slide-pic>

						<activities-new-bot :list="dataStore[item.type][item.id] || []" v-for="(item, index) in pageTree.content[type.activitiesNewBot]" :key="index+'acNewBot'" v-sdrag:real="{id: item.id, com: item.id, type: type.activitiesNewBot}">
						</activities-new-bot>

						<activities-two-pro :list="dataStore[item.type][item.id] || []" :twoproid="item.id" v-for="(item, index) in pageTree.content[type.activitiesTwoPro]" :key="index+'acTwoPro'" v-sdrag:real="{id: item.id, com: item.id, type: type.activitiesTwoPro}">
						</activities-two-pro>

						<activities-one-pro :list="dataStore[item.type][item.id] || []" :oneproid="item.id" v-for="(item, index) in pageTree.content[type.activitiesOnePro]" :key="index+'acOnePro'" v-sdrag:real="{id: item.id, com: item.id, type: type.activitiesOnePro}">
						</activities-one-pro>

						<activities-nine-pro :list="dataStore[item.type][item.id] || []" v-for="(item, index) in pageTree.content[type.activitiesNinePro]" :key="index+'NinePro'" v-sdrag:real="{id: item.id, com: item.id, type: type.activitiesNinePro}">
						</activities-nine-pro>

						<activitie-coupons :list="dataStore[item.type][item.id] || []" :copolddata='copolddata' :couponsid="item.id" v-for="(item, index) in pageTree.content[type.ActivitieCoupons]" :key="index+'sfCoupons'" v-sdrag:real="{id: item.id, com: item.id, type: type.ActivitieCoupons}">
						</activitie-coupons>

						<activitie-coupons2 :list="dataStore[item.type][item.id] || []" :copolddata='copolddata' :couponsid="item.id" v-for="(item, index) in pageTree.content[type.ActivitieCoupons2]" :key="index+'sfCoupon'" v-sdrag:real="{id: item.id, com: item.id, type: type.ActivitieCoupons2}">
						</activitie-coupons2>

						<GuessYouLike :guessYouLikeid="item.id" v-for="(item, index) in pageTree.content.GuessYouLike" v-sdrag:real="{id: item.id, com: item.id, type: type.GuessYouLike,editable:false}" :key="index+'acYouLike'">
						</GuessYouLike>
					</content-container>
				</div>
			</div>
		</div>

		<add-cart-animate></add-cart-animate>
	</div>
</template>
<script>
	//引用包裹“真实-基础组件”的组件
	import HeaderContainer from "../../components/HeaderContainer";
	import ContentContainer from "../../components/ContentContainer";
	import VerticalScroll from '../../components/VerticalScroll';
	import HeaderTab from "../../components/TabHead/StyleTabHead";
	import AnimateRefresh from "../../components/AnimateRefreshPull";
	//引用真实-基础组件
	import Header from "../header";
	import NewZone from "../GoodsForSF/NewZone";
	import activitiesbanner from "../GoodsForSF/activitiesbanner";
	import activitiesThreePic from "../GoodsForSF/threePic";
	import activitiesSlidePic from "../GoodsForSF/slidePic";
	import activitiesNewBot from "../GoodsForSF/NewBot";
	import activitiesTwoPro from "../GoodsForSF/TwoPro";
	import activitiesOnePro from "../GoodsForSF/OnePro";
	import activitiesNinePro from "../GoodsForSF/NinePro";
	import ActivitieCoupons from "../GoodsForSF/Coupons";
	import ActivitieCoupons2 from "../GoodsForSF/Coupons2";
	import GuessYouLike from "../GoodsForSF/GuessYouLike";
	import HomeCarousel from "../GoodsForSF/Carousel";
	//引用util文件
	import { getPageTree, initDomTree } from "../../utils/getPageTree";
	import { CHANGE_NAVIGATION } from "../../config/postMessage-types";
	import getPageName from "../../utils/getPageName";
	import axios from "axios";
	import { mapGetters, mapMutations } from "vuex";
	import Bscroll from 'better-scroll';
	import AddCartAnimate from "../../components/AddCartAnimate";
	import Share from "../../components/Share";
	export default {
		data() {
			return {
				type: {
					TabHead: "TabHead",
					HomeCarousel: "HomeCarousel",
					NewZone: "NewZone",
					activitiesbanner: "activitiesbanner",
					activitiesThreePic: "activitiesThreePic",
					activitiesSlidePic: "activitiesSlidePic",
					activitiesNewBot: "activitiesNewBot",
					activitiesTwoPro: "activitiesTwoPro",
					activitiesOnePro: "activitiesOnePro",
					activitiesNinePro: "activitiesNinePro",
					ActivitieCoupons: 'ActivitieCoupons',
					ActivitieCoupons2: 'ActivitieCoupons2',
					GuessYouLike: "GuessYouLike",
				},
				dataStore: {
					HomeCarousel: {},
					NewZone: {},
					activitiesbanner: {},
					activitiesThreePic: {},
					activitiesSlidePic: {},
					activitiesNewBot: {},
					activitiesTwoPro: {},
					activitiesOnePro: {},
					activitiesNinePro: {},
					ActivitieCoupons: {},
					ActivitieCoupons2: {},
				}, //缓存所有数据的对象
				styleConfig: {
					normalColor: '',
					activeColor: '',
					activeBackgroundColor: '',
				},
				tabbgcolor: "#fff",
				Bgcolor: "",
				Title: "",
				//顶部大海报数据
				bannerdata: [],
				bannerdataid: "",
				//新人专区
				NewZone: [],
				NewZoneid: "",
				//三张图片
				threePicData: [],
				threePicid: "",
				//可滑动图片
				slidePicData: [],
				slidePicid: "",
				//新人专区底部
				NewBotData: [],
				NewBotid: "",
				//一排两个商品信息
				TwoProData: [],
				TwoProid: "",
				//独个商品
				OneProData: [],
				OneProid: "",
				//九宫格商品
				NineProData: [],
				NineProid: "",
				//优惠券信息
				CouponsData: [],
				Couponsid: "",
				//滑动页面
				tabshow: false,
				toscrolltop: "",
				toAllscrolltop: "",
				puttDownY: "",
				colwidth: '',
				tabcolwidth: '',
				tabindex: '',
				//兼容手机滑动
				Scrollphone: true,
				top: null,
				//动态获取head的高
				headheight: '',
				/*滑动的tab值*/
				Scrolltabindex: '',
				noclicktab: true,
				isShare: 0, //判断是否为分享的页面
				//优惠券的实时更新信息
				copolddata: {},
				//下拉刷新的信息
				statY: 0,
				statX: 0,
				touchTime: 0,
				touchEndTop: false,
				puttDownY: 0,
				isTop: true,
				flagfresh: true,
				//tab点击不触发滑动
				clicktabnoscoll: true,
				//最后一个tab滑动事件触发一次
				tabscollone:true,
			}
		},
		components: {
			"m-header": Header,
			"header-container": HeaderContainer,
			"header-tab": HeaderTab,
			ContentContainer,
			activitiesbanner,
			NewZone,
			activitiesThreePic,
			activitiesSlidePic,
			activitiesNewBot,
			activitiesTwoPro,
			activitiesNinePro,
			activitiesOnePro,
			ActivitieCoupons,
			ActivitieCoupons2,
			"vertical-scroll": VerticalScroll,
			AddCartAnimate,
			GuessYouLike,
			Share,
			HomeCarousel,
			AnimateRefresh
		},
		computed: {
			...mapGetters([
				"getRouterLifeCycleOfName"
			]),
			...mapGetters('xxy', [
				"getacttabindex"
			]),
			pageName() {
				return getPageName();
			},
			pageTree() {
				return getPageTree(this);
			},
			pageConfig() {
				return getPageTree(this, this.pageName).config;
            },
            hasTabHeader() {
				let exits = true;
				if (!getPageTree(this, this.pageName).header.TabHead[0].config || !getPageTree(this, this.pageName).header.TabHead[0].config.pages.length) {
					exits = false;
				}
				return exits;
			},
			pageComid() {
				if(getPageTree(this, this.pageName).header.TabHead[0]) {
					return getPageTree(this, this.pageName).header.TabHead[0].config.pages;
				}
			},
			activitiesNineProFilter() {
				if(this.pageTree.content[this.type.NewZone]) {
					return this.pageTree.content[this.type.NewZone].filter(item => {
						return !item.config || !item.config.state || item.config.state === "1"
					})
				}
			},
			screenHeight() {
				if(window.isApp) {
					return window.innerHeight - '0';
				} else {
					return window.innerHeight - '60';
				}
			},
			HeaderTabNavArray() {
				if(getPageTree(this).header[this.type.TabHead][0].config && getPageTree(this).header[this.type.TabHead][0].config.pages) {
					let arr = getPageTree(this).header[this.type.TabHead][0].config.pages.filter(item => {
						return item.state === "1";
					}).map(item => {
						return {
							goodsClassName: item.name
						};
					});
					return arr;
				} else {
					return [];
				}
			},
			env() {
				return window.environment;
			},
			pagePosY() {
				return this.$store.state.cjy.pagePosY
			},
			
		},
		methods: {
			...mapMutations('xxy', [
				"setstoptouch"
			]),
			openApp() {
			//用来校验微信的ua
			let ua = navigator.userAgent.toLowerCase();
			let isWeixin = ua.indexOf('micromessenger') != -1;
			// alert(isWeixin)
				if (this.$route.query.share === "1") {
					this.$router.push({name: "MiddleWare"});
				}
			},
            //引入rn头部
			chanceNavigation(data) {
				let baseUrl = `https://${location.hostname}/static/NJ/rnweb/index.html#/${this.$router.currentRoute.path.slice(1)}?share=1`;
				let titleConfig = JSON.stringify({
					type: CHANGE_NAVIGATION,
					params: {
						title: data,
						page: 'Activity',
						shareOptions: {
							"title": '宁家商城新品上市',
							"content": `钜惠${new Date().getMonth() + 1}月，宁家商城全新升级，一路嗨翻天`,
							"url": baseUrl,
							"imageurl": ""
						},
					}
				});
				window.postMessage(titleConfig);
			},
			//滚动事件
			createdScroll() {
				// 如果bscroll实例存在那么就先销毁实例
				this.Bscroll && this.Bscroll.destroy()
				//拿到dom元素
				var verticalScroll = this.$refs.scollAllClass
				// 初始化实例
				this.Bscroll = new Bscroll(verticalScroll, {
					scrollY: true,
					click: true,
					bounce: false,
					swipeBounceTime: 2000,
					deceleration: 0.0015,
					freeScroll: true,
					momentum: true,
					probeType: 3,
					mouseWheel: true,
				})
				this.content = document.querySelector("#content-container");
				this.Bscroll.on("scroll", (pos) => {
                    if (!this.hasTabHeader) return;
					this.scolllocation(pos)
					//实现第一部分功能
					if(document.querySelector(".tabzindex1")) {
						var tabHeight = window.getComputedStyle(document.querySelector(".tabzindex1"), null).height
						var bigheadHeight = window.getComputedStyle(document.querySelector("#header-container"), null).height
						if(this.isShare != 1) {
							var headerHeight = window.getComputedStyle(document.querySelector(".headerRight"), null).height
							if(headerHeight && headerHeight.indexOf('px') > -1) {
								var str = headerHeight.split("p")
							}
						}
						if(tabHeight && tabHeight.indexOf('px') > -1) {
							var str2 = tabHeight.split("p")
						}
						if(bigheadHeight && bigheadHeight.indexOf('px') > -1) {
							var str3 = bigheadHeight.split("p")
						}
						
						if(this.isShare == 1) {
							this.top = this.content.getBoundingClientRect().top - str2[0];
						} else {
							this.top = this.content.getBoundingClientRect().top - str[0] - str2[0];
						}
						var bannerHeight = str3[0] - str2[0]
						if(this.top < 0) {
							this.tabshow = true
						} else if(this.top > 0) {
							if(!this.Scrollphone) {
								this.Scrollphone = true;
								return
							} else if(this.Scrollphone) {
								this.tabshow = false;
							}
						}
					}
					//实现第二部分功能
					if(!this.clicktabnoscoll) {
						this.clicktabnoscoll = true
						return
					}
					if(( document.querySelector(`div[data-gwdrag=${this.pageComid[0].comId}]`) && this.isShare == 1 &&document.querySelector(`div[data-gwdrag=${this.pageComid[0].comId}]`).getBoundingClientRect().top - str2[0] < 0) || (document.querySelector(`div[data-gwdrag=${this.pageComid[0].comId}]`) && this.isShare != 1 &&document.querySelector(`div[data-gwdrag=${this.pageComid[0].comId}]`).getBoundingClientRect().top - str[0] - str2[0] < 0)) {
						var numlength = this.pageComid.length - 1
						this.noclicktab = true
						for(var i = 0; i < this.pageComid.length; i++) {
							if((this.isShare != 1 && document.querySelector(`div[data-gwdrag=${this.pageComid[i].comId}]`).getBoundingClientRect().top - str[0] - str2[0] > 0) || (this.isShare == 1 && document.querySelector(`div[data-gwdrag=${this.pageComid[i].comId}]`).getBoundingClientRect().top  - str2[0] > 0)) {
								this.tabscollone = true
								if(this.Scrolltabindex == i - 1) {
									this.noclicktab = true
									return
								} else {
									this.noclicktab = false
									this.tabindex = (i - 1) + ''
									this.Scrolltabindex = (i - 1)
									return
								}
							} else if((this.tabscollone && this.isShare != 1 && document.querySelector(`div[data-gwdrag=${this.pageComid[numlength].comId}]`).getBoundingClientRect().top - str[0] - str2[0] < 0) || (this.tabscollone && this.isShare == 1 && document.querySelector(`div[data-gwdrag=${this.pageComid[numlength].comId}]`).getBoundingClientRect().top  - str2[0] < 0)) {
								this.noclicktab = false
								this.tabindex = this.pageComid.length - 1 + ''
								this.Scrolltabindex = (this.pageComid.length - 1)
								this.tabscollone = false
								return
							}
						}
					}
				})
			},
			//跳转回调
			tabOnChange(index) {
				// if (this.isShare === 1) {}
				if(!this.noclicktab) {
					return
				}
				this.tabindex = index + ''
				if(this.tabindex > -1) {
					this.tabshow = true
				}
				let comId
				if(this.pageComid[index]) {
					comId = this.pageComid[index].comId
				}
				let element = document.querySelector(`div[data-gwdrag=${comId}]`)
				if(element) {
					setTimeout(() => {
						this.Bscroll.scrollToElement(element, 300);
						this.Scrollphone = false;
						this.clicktabnoscoll = false
					}, 10)
					this.Bscroll.on('scrollEnd', (pos) => {
						this.scolllocation(this.Bscroll)
					})
				}
			},
			getsessionIddata() {
				this.sessionIddata = localStorage.getItem('sessionId');
				this.storeCodedata = localStorage.getItem('storeCode');
				if(this.pageConfig) {
					this.Bgcolor = this.pageConfig.activitiesBgcolor;
					this.Title = this.pageConfig.activitiesTitle;
					this.tabbgcolor = this.pageConfig.tabbgcolor;
					var styleConfig = {
						normalColor: this.pageConfig.tabtextcolor,
						activeColor: this.pageConfig.clicktabtextcolor,
						activeBackgroundColor: this.pageConfig.clicktabbgcolor,
					}
					this.styleConfig = styleConfig
				}
			},
			queryallBanner(id) {
				let url = window.api.goods_host + window.api.home_ad;
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						relGroup: id
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
							(this.dataStore[this.type.HomeCarousel][id] = data.data.data[0] ? data.data.data[0][id] : []))
						//缓存到本地
						this.initCache();
					}
				})
			},
			//顶部大海报数据
			queryBanner(id) {
				let url = window.api.goods_host + '/resourceConfig/mobile/posters';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						relGroup: id
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
							(this.dataStore[this.type.activitiesbanner][id] = data.data.data[0] ? data.data.data[0][id] : []))
						this.initCache()
					}
				})
			},
			//新人专区
			queryNewZone(id) {
				let url = window.api.goods_host + '/resourceConfig/mobile/newborn';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						relGroup: id
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
							(this.dataStore[this.type.NewZone][id] = data.data.data[0] ? data.data.data[0][id] : []))
						this.initCache()
					}
				})
			},
			//三张图片
			querythreePic(id) {
				let url = window.api.goods_host + '/resourceConfig/mobile/three_pic';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						relGroup: id
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
							(this.dataStore[this.type.activitiesThreePic][id] = data.data.data[0] ? data.data.data[0][id] : []))
						this.initCache()
					}
				})
			},
			//可滑动图片
			queryslidePic(id) {
				let url = window.api.goods_host + '/resourceConfig/mobile/slide_pic';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						relGroup: id
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
							(this.dataStore[this.type.activitiesSlidePic][id] = data.data.data[0] ? data.data.data[0][id] : []))
						this.initCache()
					}
				})
			},
			//新人专区底部
			queryNewBot(id) {
				let url = window.api.goods_host + '/resourceConfig/mobile/new_bot';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						relGroup: id
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
							(this.dataStore[this.type.activitiesNewBot][id] = data.data.data[0] ? data.data.data[0][id] : []))
						this.initCache()
					}
				})
			},
			//一排两个商品
			queryTwoPro(id) {
				let url = window.api.goods_host + '/resourceConfig/mobile/two_pro';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						relGroup: id,
						usePlatform: "wap",
					},
					headers: {
						'sessionId': this.sessionIddata,
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
							(this.dataStore[this.type.activitiesTwoPro][id] = data.data.data[0] ? data.data.data[0][id] : []))
						this.initCache()
					}
				})
			},
			//独个商品
			queryOnePro(id) {
				let url = window.api.goods_host + '/resourceConfig/mobile/one_pro';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						relGroup: id,
						usePlatform: "wap",
					},
					headers: {
						'sessionId': this.sessionIddata,
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
							(this.dataStore[this.type.activitiesOnePro][id] = data.data.data[0] ? data.data.data[0][id] : []))
						this.initCache()
					}
				})
			},
			//九宫格商品
			queryNinePro(id) {
				let url = window.api.goods_host + '/resourceConfig/mobile/nine_pro';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						relGroup: id,
						usePlatform: "wap",
					},
					headers: {
						'sessionId': this.sessionIddata,
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
							(this.dataStore[this.type.activitiesNinePro][id] = data.data.data[0] ? data.data.data[0][id] : []))
						this.initCache()
					}
				})
			},
			//优惠券信息
			queryCoupons(id) {
				let url = window.api.goods_host + '/resourceConfig/mobile/act_coup';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						relGroup: id,
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
							(this.dataStore[this.type.ActivitieCoupons][id] = data.data.data[0] ? data.data.data[0][id] : []))
						this.initCache()
					}
				})
			},
			queryCoupons2(id) {
				let url = window.api.goods_host + '/resourceConfig/mobile/activities_pic_coupons';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						relGroup: id,
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
							(this.dataStore[this.type.ActivitieCoupons2][id] = data.data.data[0] ? data.data.data[0][id] : []))
						this.initCache()
					}
				})
			},
			//优惠券信息对比
			queryCoupons3() {
				var sessionId = localStorage.getItem('sessionId');
				let url = api.trade_host + '/marketCenter/getDiffReleasedCoupons/' + api.enterpriseCode;
				let config = {
					url: url,
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config).then((res) => {
					this.copolddata = res.data.data[0]
				})
			},
			initData() {
				//第一步拿到所有的id
				let requestData = [];
				let requestDataheader = [];
				for(let key2 in this.pageTree.header) {
					this.pageTree.header[key2].forEach((item) => {
						requestDataheader.push({
							id: item.id,
							type: item.type,
							state: 1
						});
					});
				}
				requestDataheader.forEach(item => {
					this.startQueryData(item);
				});
				for(let key in this.pageTree.content) {
					this.pageTree.content[key].forEach((item) => {
						requestData.push({
							id: item.id,
							type: item.type,
							state: 1
						});
					});
				}
				requestData.forEach(item => {
					this.startQueryData(item);
				});
			},
			//开始根据type和id值去请求对应的数据
			startQueryData(component) {
				switch(component.type) {
					case this.type.NewZone:
						this.queryNewZone(component.id);
						break;
					case this.type.activitiesbanner:
						this.queryBanner(component.id);
						break;
					case this.type.activitiesThreePic:
						this.querythreePic(component.id);
						break;
					case this.type.activitiesSlidePic:
						this.queryslidePic(component.id);
						break;
					case this.type.activitiesNewBot:
						this.queryNewBot(component.id);
						break;
					case this.type.activitiesTwoPro:
						this.queryTwoPro(component.id);
						break;
					case this.type.activitiesOnePro:
						this.queryOnePro(component.id);
						break;
					case this.type.activitiesNinePro:
						this.queryNinePro(component.id);
						break;
					case this.type.ActivitieCoupons:
						this.queryCoupons(component.id);
						break;
					case this.type.ActivitieCoupons2:
						this.queryCoupons2(component.id);
						break;
					case this.type.HomeCarousel:
						this.queryallBanner(component.id);
						break;
					default:
						break;
				}
			},
			//把活动页数据缓存到本地
			initCache() {
			},
			//根据本地是否有缓存来决定去请求接口与否
			async loadData() {
                this.initData();
			},
			//分享链接
			shareUrl() {
				/*let str = JSON.stringify(location.href + '&share=1');*/
				return `${location.href}?share=1`;
			},

			//滚动到指定位置  该方法会在3内秒持续调用 直到页面高度超过要到的页面位置
			gotoPosition(pos) {
				var position = pos // 跳转到的位置
				if(position == 0) {
					this.$store.commit("cjy/SET_IS_RETURN", false)
				}
				var deleat = 100; //延迟时间
				var i = 0 // 执行次数
				var gotoPosistion = () => {
					i++ // 每次gotoPosistion执行次数加1
					// 设置定时器
					this.setTimeOut = setTimeout(() => {
						var bigheadHeight2 = window.getComputedStyle(document.querySelector("#header-container"), null).height
						if(bigheadHeight2 && bigheadHeight2.indexOf('px') > -1) {
							this.headheight = bigheadHeight2.split("p")[0]
						}
						var outerHeight = this.Bscroll ? -this.Bscroll.maxScrollY : 0 // 获取当前Bscroll的最大高度
						if(i * deleat > 3000) {
							//当执行到3000 ms时结束
							this.$store.commit("cjy/SET_IS_RETURN", false);
							this.isTop = true
							return
						} else if(outerHeight >= position) {
							if(pos > this.headheight) {
								this.tabshow = true
								this.tabindex = this.getacttabindex
								this.noclicktab = false
								this.$store.commit('xxy/setacttabindex', '');
								setTimeout(()=>{
									this.noclicktab = true
								},200)
							}
							// 当Bscroll的最大高度 不小于要滚动的位置 执行滚动到指定位置
							this.Bscroll.scrollTo(0, -position, 0, 'easing') // 让bscroll调到指定的位置
							this.scrollY = position // 将页面位置记录保存到组件
							this.$store.commit('cjy/CHANGE_PAGE_POS_Y', position) // 将页面位置存到vuex
							this.$store.commit("cjy/SET_IS_RETURN", false); // 将返回跳转状态重置
							this.isTop = false
							return
						}
						gotoPosistion() // 递归重复执行
					}, deleat)
				}

				//如果滚动位置为0 不需要混动 退出
				if(position == 0) {
					this.isTop = true
					return
				} else {
					this.isTop = false
				}
				gotoPosistion() //执行 跳转代码
			},

			//滑动事件开始
			touchStart(event) {
				this.setstoptouch(false)
				this.statY = event.changedTouches[0].clientY //
				this.statX = event.changedTouches[0].clientX
				this.touchTime = 0
				this.touchEndTop = false
			},

			// 手指滑动中
			touchMove(event) {
				var statMove = event.changedTouches[0].clientY // 手指相对屏幕的位置
				var puttDownY = Math.max(0, statMove - this.statY) //相对滑动开始时的手指距离
				this.puttDownY = puttDownY
				if(statMove - this.statY > 0 && this.touchTime == 0 && this.isTop) {
					var touchPos = this.touchPos
					var isDown = Math.abs(event.changedTouches[0].clientY - this.statY) > Math.abs(event.changedTouches[0].clientX - this.statX)
					this.touchEndTop = isDown //判断 如果是首次挪动手指并且是向下移动  能激活下滑刷新
				}
				if(this.touchEndTop) { //在可刷新状态下
					this.Bscroll.disable() //禁用页面滑动
					window.PSEvent.trigger('verticalPllDown', puttDownY) // 发送事件给其他组件 在可刷新状态
				}
				this.touchTime++ //本次touch事件中手指挪动次数刷新
			},

			// 手指滑动结束
			touchEnd(event) {
				// 如果已激活下滑刷新
				if(this.touchEndTop) {
					event && event.stopPropagation()
					event && event.preventDefault() //touch结束时阻止 点击事件发生
					this.Bscroll.enable() // touch事件结束时重新激活 滑动
				}
				// 手指滑动距离 超过0 结束时将事件发送出去
				if(this.puttDownY > 0 && this.touchEndTop) {
					var puttDownY = this.puttDownY
					this.$emit('pullDown', puttDownY)
					window.PSEvent.trigger('verticalPllDownEnd', puttDownY)
				}
				this.puttDownY = 0 // 重新初始化滑动的距离

				//当手指离开时判断是否是在最顶端
				if(this.scrollY != 0) {
					this.isTop = false
				}
			},
			//下拉刷新加载
			dataRefresh() {
				if(this.flagfresh) {
					this.flagfresh = false
					this.getsessionIddata();
					this.initData();
					this.queryCoupons3();
					// this.getTemplate();
				}
				setTimeout(() => {
					this.flagfresh = true
					window.PSEvent.trigger('pageLoadedOver')
					this.Bscroll.enable()
				}, 1200)
			},
			//记录位置
			scolllocation(pos) {
				if(-pos.y == NaN) {
					return
				}
				this.$store.commit('cjy/CHANGE_PAGE_POS_Y', -pos.y)
				this.scrollY = -pos.y
				if(pos.y == 0) {
					this.isTop = true
				} else {
					this.isTop = false
				}
			},
            initIsShare() {
                if (this.$route.query.share === "1" || window.isApp) {
                    this.isShare = 1;
                } 
            }
		},
		created() {
			window.PSEvent.listen('dataRefresh', this.dataRefresh)
		},
		mounted() {
            this.initIsShare();
            if(window.isApp) {
				this.chanceNavigation('')
			}
			this.queryCoupons3()
			this.createdScroll()
			initDomTree(this.$store.getters.getDomTree[this.pageName]);
			this.getsessionIddata();
			this.loadData();
			if(this.isShare == 1 && this.Title) {
				document.getElementsByTagName("title")[0].innerText = this.Title
			}
			this.$store.commit('cjy/CHANGE_PAGE_POS_Y', 0) //初始化滚轮位置
			if(this.$store.state.cjy.isReturn ) {
				var pageName = this.$route.name // 获取路由名称
				var pagePositionDate = this.$store.state.cjy.returnPos || {} // 获取位置存贮信息列表
				var pagePosy = pagePositionDate[pageName] ? pagePositionDate[pageName].returnPosy : 0 //找出对应的位置信息
				this.gotoPosition(pagePosy)
			}
		},
		updated() {
			//console.log(`this.$store.getters.getDomTree[${this.pageName}]`, this.$store.getters.getDomTree[this.pageName])
			initDomTree(this.$store.getters.getDomTree[this.pageName]);
			this.$nextTick(() => {
				if(this.Bscroll) {
					setTimeout(() => {
						this.Bscroll.refresh()
					}, 500)
				}
			});
		},
		beforeDestroy() {
            PSEvent.remove("dataRefresh", this.dataRefresh);
			this.setTimeout && clearTimeout(this.setTimeout) // 清除定时器
			this.Bscroll && this.Bscroll.destroy() // 销毁Bscroll
			this.$emit('savePos', this.scrollY) //将当前的滚动位置传回父组件
		},
		watch: {
			toAllscrolltop(newdata, olddata) {
				if(olddata > newdata) {
					this.puttDownY = 1
				} else {
					this.puttDownY = -1
				}
            },
        	Title(data) {
				if(data && !this.changeNavigationState && window.isApp) {
					this.changeNavigationState = true;
					this.chanceNavigation(data)
				}
			}
		},
		beforeRouteLeave(to, from, next) {
			var name = from.name;
			this.$store.commit('cjy/SET_RETURN_POS', name);
			this.$store.commit('xxy/setacttabindex', this.tabindex);
			next();
		},
	}
</script>
<style>
	.home-container {
		overflow-y: hidden;
	}
	
	.overhid {
		overflow: hidden;
	}
	
	.sbbjclass {
		position: relative;
		width: 100%;
		display: flex;
		flex-flow: column wrap;
		-webkit-flex-flow: column wrap;
		height: 100%;
		-webkit-overflow-scrolling: auto;
	}
	
	.contentnew {
		flex: 1;
		-webkit-flex: 1;
		overflow-y: scroll;
		width: 100%;
		overflow-x: hidden;
	}
	
	.tabzindex1 {
		width: 100%;
	}
	
	.tabshow {
		position: absolute;
		z-index: -3;
	}
	
	.NewThematicActivities .cjy-center {
		top: 0px !important;
	}
</style>